<template>
	<div class="content padding2">
		<div class="backgound" v-show="show">
			<div class="title"><i>立华纺织</i></div>
			<div class="desc">开拓创新 追求卓越 诚信为本 客户至上</div>
			<div class="logo">新华源集团</div>
		</div>
		<div class=" font56">欢迎登录</div>
		<div class=" font56  margin20"></div>
		<div class="input-area">
			<div class="tips font24">请输入账号</div>
			<input class="font24 border-none"  type="text"  v-model="userName">
		</div>
		<div class="input-area margin-top-40 flex">
			<div class="felx1">
				<div class="tips font24">请输入密码</div>
				<input class="font24 border-none" :type="type"  v-model="password" >
			</div>
			<div class="flex algin-center">

				<img class="eye" :src="src" alt="" @click="eyeChange">
			</div>
		</div>

		<div class="margin-top-60">
			<label class="radio">
				<radio style="transform:scale(0.7)" value="r1" />我已阅读并同意：用户使用协议，服务协议，隐私权政策
			</label>
		</div>
		<div class="button-area margin-top-60">
			<button class="cu-btn bg-blue lg margin-right  width90" @click="onLogin">
				登录
			</button>
		</div>
		<div class="tips center margin-top-60">忘记密码</div>
		<div class="button-area margin-top-120">
			<span class="oneKey">手机号一键注册</span>
		</div>
	</div>
</template>

<script>
import { mapActions } from "vuex"
export default {
	data() {
		return {
			userName: 'admin',				//	用户名
			password: '123456',			//	密码
			show: true,				//	过渡页面
			type: 'password',		//	输入框类型
			flag: false,		// 是否显示密码								
			src: '../../static/icon/eyeClose.png',
			src1: '../../static/icon/eyeOpen.png',		// 睁眼	
			src2: '../../static/icon/eyeClose.png',		// 闭眼	
		};
	},
	onLoad: function () {
		setTimeout(() => {
			this.show = false
		}, 1000)
	},
	computed: {

	},

	methods: {
		eyeChange() {
			this.flag = !this.flag;
			if (this.flag) {
				this.src = this.src1;
				this.type = 'text'
			} else {
				this.src = this.src2

				this.type = 'password'
			}
		},
		register() {
			alert(1)
		},
		other() {
			alert(2)
		},


		...mapActions(["mLogin", "PhoneLogin", "ThirdLogin"]),
		onLogin: function () {
			if (!this.userName || this.userName.length == 0) {
				this.$tip.toast('请填写用户名');
				return;
			}
			if (!this.password || this.password.length == 0) {
				this.$tip.toast('请填写密码');
				return;
			}
			let loginParams = {
				username: this.userName,
				password: this.password
			}
			this.loading = true;
			this.mLogin(loginParams).then((res) => {
				this.loading = false;
				if (res.data.success) {
					// #ifdef APP-PLUS
					this.saveClientId()
					// #endif
					// #ifndef APP-PLUS
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({ name: 'index' })
					// #endif
				} else {
					this.$tip.alert(res.data.message);
				}
			}).catch((err) => {
				let msg = err.data.message || "请求出现错误，请稍后再试"
				this.loading = false;
				this.$tip.alert(msg);
			}).finally(() => {
				this.loading = false;
			})
		},
		saveClientId() {
			var info = plus.push.getClientInfo();
			var cid = info.clientid;
			this.$http.get("/sys/user/saveClientId", { params: { clientId: cid } }).then(res => {
				console.log("res::saveClientId>", res)
				this.$tip.success('登录成功!')
				this.$Router.replaceAll({ name: 'index' })
			})
		},
		changePassword() {
			this.showPassword = !this.showPassword;
		},
		onSMSSend() {
			let smsParams = {};
			smsParams.mobile = this.phoneNo;
			smsParams.smsmode = "0";
			let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			if (!smsParams.mobile || smsParams.mobile.length == 0) {
				this.$tip.toast('请输入手机号');
				return false
			}
			if (!checkPhone.test(smsParams.mobile)) {
				this.$tip.toast('请输入正确的手机号');
				return false
			}
			this.$http.post("/sys/sms", smsParams).then(res => {
				if (res.data.success) {
					this.smsCountDown = 60;
					this.startSMSTimer();
				} else {
					this.smsCountDown = 0;
					this.$tip.toast(res.data.message);
				}
			});
		},
		startSMSTimer() {
			this.smsCountInterval = setInterval(() => {
				this.smsCountDown--;
				if (this.smsCountDown <= 0) {
					clearInterval(this.smsCountInterval);
				}
			}, 1000);
		},
		onSMSLogin() {
			let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

			if (!this.phoneNo || this.phoneNo.length == 0) {
				this.$tip.toast('请填写手机号');
				return;
			}
			if (!checkPhone.test(this.phoneNo)) {
				this.$tip.toast('请输入正确的手机号');
				return false
			}
			if (!this.smsCode || this.smsCode.length == 0) {
				this.$tip.toast('请填短信验证码');
				return;
			}
			let loginParams = {
				mobile: this.phoneNo,
				captcha: this.smsCode
			};
			this.PhoneLogin(loginParams).then((res) => {
				console.log("res====》", res)
				if (res.data.success) {
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({ name: 'index' })
				} else {
					this.$tip.error(res.data.message);
				}
			}).catch((err) => {
				let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
				this.$tip.error(msg);
			});
		},
		loginSuccess() {
			// 登陆成功，重定向到主页
			this.$Router.replace({ name: 'index' })
		},
		requestFailed(err) {
			this.$message.warning("登录失败")
		},

	},
	beforeDestroy() {

	},
}
</script>

<style lang="scss" scoped>
.border-none{
	border: none;
	outline: none;
}
.backgound {
	position: fixed;
	background-color: black;
	width: 100%;
	height: 100%;
	z-index: 100;
	color: #4095ff;
	top: 0;
	left: 0;
	text-align: center;

	.title {
		font-size: 60rpx;
		margin-top: 40%;
	}

	.desc {
		margin-top: 10%;
		color: #4a90fb;
	}

	.logo {
		position: absolute;
		bottom: 10%;
		width: 100%;
		color: #4a90fb;
	}
}

.margin-top-120 {
	margin-top: 120rpx;
}

.oneKey {
	padding: 20rpx 40rpx;
	color: rgb(66, 177, 241);
	border-radius: 50rpx;
	border: 2rpx solid rgb(66, 177, 241);
}

.eye {
	width: 40rpx;
	height: 40rpx;

}

.algin-center {
	align-items: center;
}

.flex {
	display: flex;
}

.felx1 {
	flex: 1
}

.input-area {
	background-color: white;
	border-radius: 20rpx;
	padding: 20rpx;
}

.tips {
	color: rgb(66, 177, 241);
}

.padding2 {
	padding: 0 4%;
}

.content {
	padding-top: 200rpx;
	height: 100%;
}

.center {
	text-align: center;
}

.font56 {
	font-size: 56rpx;
}

.gray {
	color: gray;
}

.font24 {
	font-size: 24rpx;
}

.font20 {
	font-size: 20rpx;
}

.margin20 {
	margin: 10px 0;
}

.margin-top-60 {
	margin-top: 60rpx;
}

.margin-top-40 {
	margin-top: 40rpx;
}

.button-area {
	width: 100%;
	text-align: center;
}

.width90 {
	width: 80%;
}

.radio {
	line-height: 40rpx;
}</style>
